<template>
  <div>
    <el-container>
      <el-aside width="collapse">
        <el-scrollbar>
          <el-menu
            class="el-menu-vertical"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#ffd04b"
            mode="horizontal"
            router
            :collapse="isCollapse"
          >
          <!-- mode:"horizontal"=光标展示效果 -->

            <!-- 左侧导航栏列表 -->
            <Navbar :ItemList="ItemList" :isCollapse="isCollapse" />
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="box_bgd" @click="isC">
            <!-- 点击展开收起导航和切换对应图标 -->
            <i class="el-icon-s-fold" v-show="block"></i>
            <i class="el-icon-s-unfold" v-show="toggle"></i>
            <!-- <template>
              <div class="keji">@就爱科技 Love of science</div></template
            > -->
          </div>

          <!-- 下拉菜单 -->
          <div style="user-info">
            <el-avatar
              shape="square"
              size="small"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>

            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link un">
                {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="handleProfile"
                  >个人中心</el-dropdown-item
                >
                <el-dropdown-item command="handleAbout"
                  >关于我们</el-dropdown-item
                >
                <el-dropdown-item command="handlelogout"
                  >注销登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 右边内容部分 -->
        <el-main>
          <router-view></router-view>
        </el-main>

        <!-- 底部 -->
        <el-footer>
          Copyright © 2021 - 2021 9I Co. All Rights Reserved. 就爱科技 版权所有
        </el-footer>
      </el-container>
    </el-container>

    <!-- 注销登录弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定注销当前用户吗？请确保当前工作已经保存^_^</span>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <!-- <el-button type="primary" @click="handleConfirmLogout">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Navbar from './Navbar'
import routes from '@/router/routes'

// import { getTokenValueData, removeToken } from '../utils/auth'

export default {
  data () {
    return {
      isCollapse: false, // 导航栏默认为展开
      toggle: false, // 第二个图标默认隐藏
      block: true, // 默认显示第一个图标
      username: '未登入',
      dialogVisible: false
    }
  },
  components: {
    Navbar
  },
  // mounted () {
  //   const data = getTokenValueData()
  //   this.username =
  //     data.nickname.trim().length > 0 ? data.nickname : data.username
  //   console.log(data)
  // },
  computed: {
    // 处理路由地址（path)
    ItemList: function () {
      const rs = this.resolve(routes)
      return rs
    }
  },
  methods: {
    resolve: function (arr, parentPath = '') {
      const newArr = []

      arr.forEach((item) => {
        parentPath =
          parentPath && parentPath.lastIndexOf('/') !== parentPath.length - 1
            ? parentPath + '/'
            : parentPath

        item.path = parentPath + item.path

        if (item.children && item.children.length > 0) {
          const childArr = this.resolve(item.children, item.path)
          item.children = childArr
        }

        if (item.alwaysShow && item.children && item.children.length === 1) {
          const oldTitle = item.children[0].title
          item = item.children[0]
          item.title = oldTitle
        }

        if (!item.hidden) newArr.push(item)
      })

      return newArr
    },
    // 动态控制展开与收起和切换对应图标
    isC () {
      this.isCollapse = !this.isCollapse
      this.toggle = !this.toggle
      this.block = !this.block
    },

    // 下拉菜单点击事件
    handleCommand (comditem) {
      if (!comditem) {
        return this.$message('选项缺少command属性')
      }
      switch (comditem) {
        case 'handleProfile':
          this.handleProfile()
          break
        case 'handleAbout':
          this.handleAbout()
          break
        case 'handlelogout':
          this.handlelogout()
          break
      }
    },

    // 个人中心
    handleProfile () {
      this.$router.push({ path: '/profile' })
    },

    // 关于我们
    handleAbout () {
      this.$router.push({ path: '/about/about' })
    },

    // 注销登录
    handlelogout () {
      this.dialogVisible = true
      console.log(1111)
    }
    // 确认按钮
    // handleConfirmLogout () {
    //   this.dialogVisible = false
    //   removeToken()
    // }
  }
}
</script>

<style>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>

<style scoped>
.unorimg {
  display: flex;
  justify-content: center;
}
.un {
  padding: 0 4px;
  line-height: 40px;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
.el-icon-s-unfold,
.el-icon-s-fold {
  font-size: 28px;
  cursor: pointer;
  /* transform: rotate(180deg); */
}
.el-scrollbar {
  height: 100vh;
}
.el-aside {
  background-color: #545c64;
  height: 100vh;
}
.el-menu {
  border-right: none;
  height: 100vh;
}
.el-header {
  background-color: rgb(247, 247, 247);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.el-main {
  background-color: white;
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
.el-footer {
  background-color: rgb(243, 240, 243);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.keji {
  margin-left: 45px;
}
</style>
